<template>
  <!-- #ifdef H5 -->
  <el-dialog
    v-model="isShow"
    v-bind="$attrs"
    :show-close="false"
    :fullscreen="fullscreen"
  >
    <template #header>
      <view class="dialog-header-container">
        <view class="dialog-header--title-container">
          <slot name="header">{{ $attrs["title"] }}</slot>
        </view>
        <view class="dialog-header--btns-container">
          <view class="btn" @click.stop="onChangeFullscreen">
            <GdIcon icon-name="full-screen"></GdIcon>
          </view>
          <view class="btn" @click.stop="onClose">
            <GdIcon icon-name="close"></GdIcon>
          </view>
        </view>
      </view>
    </template>
    <slot class="dialog-content-container"></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
  <!-- #endif -->
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import GdIcon from "@gd-accbuild-ui/gd-ui/gd-icon/gd-icon.vue";
// #ifdef H5
import { ElDialog } from "element-plus";
import "element-plus/theme-chalk/el-dialog.css";
// #endif
import { getCurrentInstance, toRefs, watch, inject, ref,computed } from "vue";
const props = defineProps({
  /**
   * 容器是否显示隐藏
   */
  modelValue: {
    type: Boolean,
  },
});
const updateContainerVisiable = inject("updateContainerVisiable", () => {});

const emits = defineEmits(["update:modelValue", "changeFullscreen"]);
const isShow = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits("update:modelValue", value);
  },
});
const onClose = () => {
  updateContainerVisiable(false);
};
const fullscreen = ref(false);
const onChangeFullscreen = () => {
  fullscreen.value = !fullscreen.value;
  emits("changeFullscreen", fullscreen.value);
};
</script>
<style lang="scss" scoped>
.dialog-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  .dialog-header--title-container {
    width: 100%;
  }
  .dialog-header--btns-container {
    display: flex;
    flex-direction: row;
    margin-right: -18px;
    .btn {
      padding: 5px;
      cursor: pointer;
      margin: 1px;
    }
    .btn:hover {
      transform: scale(1.3);
    }
  }
}
::v-global(.el-overlay .el-overlay-dialog) {
  z-index: 1001;
}
</style>
